<template>
  <baidu-map
    class="map"
    :center="{ lng: cityInfo.longitude, lat: cityInfo.latitude }"
    :zoom="8"
    :scroll-wheel-zoom="true"
  >
    <bm-map-type
      :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
      anchor="BMAP_ANCHOR_TOP_LEFT"
    ></bm-map-type>
    <input v-model="search" />
    <button @click="onSearch">搜索</button>

    <!-- 自定义覆盖物 ==> 可以遍历覆盖物  -->
    <bm-overlay
      :labelStyle="{ color: 'red', fontSize: '12px' }"
      title="Hover me"
      v-for="(item, idx) in data"
      :key="idx"
    >
      <!-- 文字 -->
      <bm-label
        :content="item.name"
        :position="{ lng: item.longitude, lat: item.latitude }"
        :labelStyle="{ color: 'red', fontSize: '12px' }"
        title="Hover me"
        @click="getCity(item)"
      />
      <!-- 圈 -->
      <bm-circle
        :center="{ lng: item.longitude, lat: item.latitude }"
        :radius="circlePath.radius"
        stroke-color="blue"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        @lineupdate="updateCirclePath"
      ></bm-circle>
    </bm-overlay>
  </baidu-map>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: [],
      search: "",
      //地图默认的中心坐标
      cityInfo: {
        longitude: 116.404,
        latitude: 39.915,
      },
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915,
        },
        radius: 10000,
      },
    };
  },
  methods: {
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter(); //更新圆心
      this.circlePath.radius = e.target.getRadius(); //更新半径
    },
    getCity(item) {
      console.log(item);
    },
    //点击搜索
    async onSearch() {
      //调用搜索城市接口 ==> 将输入框内的城市传递到后端
      const res = await axios.post("/changeCity", {
        params: { cityName: this.search },
      });
      //将子级城市数据赋值到data中
      this.data = res.data.area;
      //将输入城市数据复制给cityInfo
      this.cityInfo = res.data.data;
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>